<html>
<head>
<meta charset="UTF-8">
<title>医院基础疾病患者群体科学营养特餐配送智慧化服务平台</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
<script src="js/jquery.js"></script>
<style>
html, body {
  height: 100%;
  margin: 0;
}
 
body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  max-width: 1080px;
background-color: #f1f1f1;
  margin: 0 auto;
}
.top{
    background:url('img/building-2654823_1280.jpg') 0 0 no-repeat;
    height: 500px;
    background-size: cover; /* 背景图片覆盖整个div区域 */
    background-position: center; 
    position: relative;
    width: 100%;
}
.progress-9 {    
  --r1: 154%;
  --r2: 68.5%;
  width:60px;
  height:60px;
  border-radius: 50%; 
  background:
    radial-gradient(var(--r1) var(--r2) at top ,#0000 79.5%,#269af2 80%) center left,
    radial-gradient(var(--r1) var(--r2) at bottom,#269af2 79.5%,#0000 80%) center center,
    radial-gradient(var(--r1) var(--r2) at top ,#0000 79.5%,#269af2 80%) center right,
    #ccc;
  background-size: 50.5% 220%;
  background-position: -100% 0%,0% 0%,100% 0%;
  background-repeat:no-repeat;
  animation:p9 2s infinite linear;
}
@keyframes p9 {
    33%  {background-position:    0% 33% ,100% 33% ,200% 33% }
    66%  {background-position: -100%  66%,0%   66% ,100% 66% }
    100% {background-position:    0% 100%,100% 100%,200% 100%}
}
.width300{
    width: 350px;
}
</style>
</head>
<body  >
    <div class="progress-9" style="display: none;"></div>

    <div style="width: 100%;" id="first">
        <div class="top">
            <h3 style="position: absolute;
            bottom: 0;
            right: 10;
            background-color: #fff;
            padding: 10px 10px;
            border-radius: 7px;
            ">医院基础疾病患者群体科学营养特餐配送智慧化服务平台
               </h3>    
        </div>
          <div class="container" style="margin-top:60px">
            <div class="input-group mb-3">
                <input type="text" class="form-control" placeholder="请输入您的身份证号" style="height: 80px;border-top-left-radius: 50px;border-bottom-left-radius: 50px;font-size: 28px;" maxlength="18">
                <div class="input-group-append ">
                <span class="input-group-text " style="background-color: #007bff;color: #fff;width: 180px;display: flex;justify-content: center;font-size: 24px;cursor:pointer; " id="bt11">确定</span>
                </div>
            </div>
         </div>
    </div>
    <div style="width: 100%;display: none;" id="second">

          <div class="container" style="background-color: #fff;font-size: 24px;padding: 20px 40px;">
            <div class="d-flex" style="margin: 30px 0;">
                <div class="width300">姓名：李XX</div>
                <div class="width300">性别：女</div>
                <div class="width300">年龄：29</div>
            </div>
            <div class="d-flex" style="margin: 30px 0;">
                <div class="width300">身高：168</div>
                <div class="width300">体重：49KG</div>
                <div class="width300">电话：136xxxxxxxxx</div> 
            </div>
            <div class="d-flex" style="margin: 30px 0;">
                <div class="width300">医生诊断结论</div>
                <div>
                    <button type="button" class="btn btn-info" style="width: 128px;height: 128px;">上传诊断结论</button>
                </div>
            </div>
            <div class="d-flex" style="margin: 30px 0;">
                <div class="width300">请选择就诊医院</div>
                <div class="form-group width300">
                    <select class="form-control" id="sel1" >
                      <option>三甲XX医院1</option>
                      <option>二甲XX医院2</option>
                      <option>XX医院3</option>
                      <option>XX医院4</option>
                    </select>
                  </div>
            </div>
            <div class="d-flex" style="margin: 30px 0;" >
                <div class="width300">以上信息是否属实</div>
                <div class="form-check">
                    <label class="form-check-label" style="display: flex;
                    align-items: center;">
                      <input type="checkbox" class="form-check-input" value="">是
                    </label>
                  </div>
    
            </div>
            <div class="d-flex" style="margin-top:60px">
                <div style="width: 100%;display: flex;justify-content: space-around;">
                    <button id="bt21" type="button" class="btn btn-primary" style="width: 96px;height: 96px;">提交</button>
                    <button id="bt22" type="button" class="btn btn-secondary" style="width: 96px;height: 96px;">返回</button>
                </div>
            </div>

         </div>
    </div>
    <div style="width: 100%;display: none;" id="thrid">

        <div class="container" style="background-color: #fff;font-size: 24px;padding: 20px 40px;">
          <div class="d-flex" style="margin: 30px 0;flex-direction: column;justify-content: center;width: 100%;">
              <div style=" font-size: 36px;"><img src="img/cg.png" style="width: 128px;">预约成功！</div>
              <div>订单编号：012766666</div>
              <div>系统将在2个工作日内提供整体营养配餐解决方案</div>
              <div>截止时间：2024年7月1日</div>
          </div>


          <div class="d-flex">
              <div style="width: 100%;display: flex;justify-content: space-around;background-color: #fff;">
                  <button id="bt31" type="button" class="btn btn-primary" style="width: 96px;height: 96px;">下一步</button>
                  <button id="bt32" type="button" class="btn btn-secondary" style="width: 96px;height: 96px;">返回</button>
              </div>
          </div>

       </div>
  </div>
  <div style="width: 100%;display: none;" id="fourth">

    <div class="container" style="background-color: #fff;font-size: 24px;padding: 20px 40px;">
      <div class="d-flex" style="margin: 30px 0;flex-direction: column;justify-content: center;width: 100%;">
          <div style="margin: 20px 0;">订单编号：012766666</div>
          <div style="margin: 20px 0;">根据您病情生成的营养特餐整体方案：</div>
          <div style="font-size: 20px;margin: 20px 0;">
            <p> 1. 早餐：吃高钙、高蛋白的食物如豆浆、牛奶、鸡蛋等。</p>
            <p>2. 午餐：主食要超过125克，以高纤维食物为主，如高纤维馒头、白米、面条等，搭配肉、豆类和蔬菜。</p>
            <p>3. 晚餐：吃7分饱左右，选择杂粮饭和蔬菜，适当增加优质蛋白质。血糖高患者出现不适感需及时就医</p>

            </div>
            <div class="d-flex" style="margin: 30px 0;" >
              <div class="width300">是否同意以上方案</div>
              <div class="form-check">
                  <label class="form-check-label" style="display: flex;
                  align-items: center;">
                    <input type="checkbox" class="form-check-input" value="">是
                  </label>
                </div>
  
          </div>
      </div>
      <div class="d-flex">
          <div style="width: 100%;display: flex;justify-content: space-around;background-color: #fff;">
              <button id="bt41" type="button" class="btn btn-primary" style="width: 96px;height: 96px;">下一步</button>
              <button id="bt42" type="button" class="btn btn-secondary" style="width: 96px;height: 96px;">返回</button>
          </div>
      </div>

   </div>
</div>
<div style="width: 100%;display: none;" id="five">

  <div class="container" style="background-color: #fff;font-size: 24px;padding: 20px 40px;">
    <div class="d-flex" style="margin: 30px 0;flex-direction: column;justify-content: center;width: 100%;">
        <div style="margin: 20px 0;">订单编号：012766666</div>
        <div style="margin: 20px 0;">医生建议：</div>
        <div style="font-size: 20px;margin: 20px 0;">
          <p> 1. 调整饮食 血糖高的患者需要调整饮食结构,血糖高的患者在平时的饮食中,不可以食用含糖高的食物</p>
          </div>
          <div class="d-flex" style="margin: 30px 0;" >
            <div class="width300">是否同意以上方案</div>
            <div class="form-check">
                <label class="form-check-label" style="display: flex;
                align-items: center;">
                  <input type="checkbox" class="form-check-input" value="">是
                </label>
              </div>

        </div>
    </div>
    <div class="d-flex">
        <div style="width: 100%;display: flex;justify-content: space-around;background-color: #fff;">
            <button id="bt51" type="button" class="btn btn-primary" style="width: 96px;height: 96px;">下一步</button>
            <button id="bt53" type="button" class="btn btn-primary" style="width: 96px;height: 96px;">寻求别的方案</button>
            <button id="bt52" type="button" class="btn btn-secondary" style="width: 96px;height: 96px;">返回</button>
        </div>
    </div>

 </div>
</div>
<div style="width: 100%;display: none;" id="sex1">

  <div class="container" style="background-color: #fff;font-size: 24px;padding: 20px 40px;">
    <div class="d-flex" style="margin: 30px 0;flex-direction: column;justify-content: center;width: 100%;">
        <div style="margin: 20px 0;">订单编号：012766666</div>
        <div style=" font-size: 36px;"><img src="img/th.png" style="width: 128px;">您正在预约配送服务</div>
        <div style="font-size: 20px;margin: 20px 0;">

          </div>
          <div class="d-flex" style="margin: 30px 0;" >
            <div class="width300">是否同意配送</div>
            <div class="form-check">
                <label class="form-check-label" style="display: flex;
                align-items: center;">
                  <input type="checkbox" class="form-check-input" value="">是
                </label>
              </div>

        </div>
    </div>
    <div class="d-flex">
        <div style="width: 100%;display: flex;justify-content: space-around;background-color: #fff;">
            <button id="bt611" type="button" class="btn btn-primary" style="width: 96px;height: 96px;">下一步</button>
            <button id="bt612" type="button" class="btn btn-secondary" style="width: 96px;height: 96px;">返回</button>
        </div>
    </div>

 </div>
</div>

<div style="width: 100%;display: none;" id="sex2">

  <div class="container" style="background-color: #fff;font-size: 24px;padding: 20px 40px;">
    <div class="d-flex" style="margin: 30px 0;flex-direction: column;justify-content: center;width: 100%;">
        <div style="margin: 20px 0;">订单编号：012766666</div>
        <div style="margin: 20px 0;">更改方案</div>
        <div style="font-size: 20px;margin: 20px 0;">
          <p> 1个工作日内提供调整后的配餐整体解决方案</p>
          </div>
          <div class="d-flex" style="margin: 30px 0;" >
            <div class="width300">是否同意以上方案</div>
            <div class="form-check">
                <label class="form-check-label" style="display: flex;
                align-items: center;">
                  <input type="checkbox" class="form-check-input" value="">是
                </label>
              </div>

        </div>
    </div>
    <div class="d-flex">
        <div style="width: 100%;display: flex;justify-content: space-around;background-color: #fff;">
            <button id="bt621" type="button" class="btn btn-primary" style="width: 96px;height: 96px;">下一步</button>
            <button id="bt622" type="button" class="btn btn-secondary" style="width: 96px;height: 96px;">返回</button>
        </div>
    </div>

 </div>
</div>

<div style="width: 100%;display: none;" id="seven">

  <div class="container" style="background-color: #fff;font-size: 24px;padding: 20px 40px;">
    <div class="d-flex" style="margin: 30px 0;flex-direction: column;justify-content: center;width: 100%;">
        <div style="margin: 20px 0;">订单编号：012766666</div>
        <div style="margin: 20px 0;">菜单</div>
        <div style="font-size: 20px;margin: 20px 0;">
          <p> 1.洋葱炒瘦肉，可以很有效的防止动脉硬化的产生。先准备洋葱和瘦肉各150克，在准备酱油、盐、味精等作料适量。洋葱切片、肉切丝。放油→炒肉→洋葱→调料</p>
          <p> 2.海带绿豆汤可以治高血压海带150克，浸泡、洗净、切碎;绿豆150克洗净。共入锅内煮至烂熟，用红糖调服，每天2次。</p>
          <p> 3.芹菜苦瓜汤可以很好的防治高血压，我们先准备芹菜和苦瓜等食材各80克，然后将二者同时入锅炖煮</p>
          <p> 4.胡萝卜粥防止高血压</p>
          <p> 5.配餐时长<input type="text" value="5" style="width: 50px;">天</p>
          </div>
          <div class="d-flex" style="margin: 30px 0;" >
            <div class="width300">是否同意以上方案</div>
            <div class="form-check">
                <label class="form-check-label" style="display: flex;
                align-items: center;">
                  <input type="checkbox" class="form-check-input" value="">是
                </label>
              </div>

        </div>
    </div>
    <div class="d-flex">
        <div style="width: 100%;display: flex;justify-content: space-around;background-color: #fff;">
            <button id="bt71" type="button" class="btn btn-primary" style="width: 96px;height: 96px;">下一步</button>
            <button id="bt72" type="button" class="btn btn-secondary" style="width: 96px;height: 96px;">返回</button>
        </div>
    </div>

 </div>
</div>
<div style="width: 100%;display: none;" id="eight">

  <div class="container" style="background-color: #fff;font-size: 24px;padding: 20px 40px;">
    <div class="d-flex" style="margin: 30px 0;flex-direction: column;justify-content: center;width: 100%;">
        <div style="margin: 20px 0;">订单编号：012766666</div>
        <div style="margin: 20px 0;">金额:400元</div>
        <div style="font-size: 20px;margin: 20px 0;">

          <p> 配餐地址：<input type="text" placeholder="请输入详细地址，小区，门牌号等" style="width: 650px;"></input></p>
          </div>
          <div class="d-flex" style="margin: 30px 0;" >
            <div class="width300">是否同意以上方案</div>
            <div class="form-check">
                <label class="form-check-label" style="display: flex;
                align-items: center;">
                  <input type="checkbox" class="form-check-input" value="">是
                </label>
              </div>

        </div>
    </div>
    <div class="d-flex">
        <div style="width: 100%;display: flex;justify-content: space-around;background-color: #fff;">
            <button id="bt81" type="button" class="btn btn-primary" style="width: 96px;height: 96px;">下一步</button>
            <button id="bt82" type="button" class="btn btn-secondary" style="width: 96px;height: 96px;">返回</button>
        </div>
    </div>

 </div>
</div>

<div style="width: 100%;display:none" id="nine">

  <div class="container" style="background-color: #fff;font-size: 24px;padding: 20px 40px;">
    <div class="d-flex" style="margin: 30px 0;flex-direction: column;justify-content: center;width: 100%;">
        <div style="margin: 20px 0;">订单编号：012766666</div>
        <div style=" font-size: 36px;"><img src="img/cg.png" style="width: 128px;">付款成功！正在配送中</div>
        <div style="font-size: 20px;margin: 20px 0;">
          <div style="margin: 20px 0;">配餐人：李XX</div>
          <div style="margin: 20px 0;">配餐地址:长春市XX小区xx栋</div>
          <div style="margin: 20px 0;">预计送达时间：2024年7月2日</div>
          <div style="margin: 20px 0;">菜单</div>
          <div style="font-size: 20px;margin: 20px 0;">
            <p> 1.洋葱炒瘦肉，可以很有效的防止动脉硬化的产生。</p>
            <p> 2.海带绿豆汤可以治高血压海带150克，浸泡、洗净、切碎</p>
            <p> 3.芹菜苦瓜汤可以很好的防治高血压，我们先准备芹菜和苦瓜等食材各80克，然后将二者同时入锅炖煮</p>
            <p> 4.胡萝卜粥防止高血压</p>
            </div>
          </div>

    </div>

 </div>
</div>

<script>
    $('#bt11').click(function(){
        $('.progress-9').show()
        $('#first').hide();
        setTimeout(function() {
  // 这里是延迟执行的代码
        $('#second').show()
        $('.progress-9').hide()
        }, 1000);
    
        })
        $('#bt21').click(function(){
        $('.progress-9').show()
        $('#second').hide();
        setTimeout(function() {
  // 这里是延迟执行的代码
        $('#thrid').show()
        $('.progress-9').hide()
        }, 1000);
    
        })
        $('#bt31').click(function(){
          $('.progress-9').show()
          $('#thrid').hide();
          setTimeout(function() {
    // 这里是延迟执行的代码
          $('#fourth').show()
          $('.progress-9').hide()
          }, 800);
      
          })
          $('#bt41').click(function(){
            $('.progress-9').show()
            $('#fourth').hide();
            setTimeout(function() {
      // 这里是延迟执行的代码
            $('#five').show()
            $('.progress-9').hide()
            }, 900);
            })
            $('#bt51').click(function(){
              $('.progress-9').show()
              $('#five').hide();
              setTimeout(function() {
        // 这里是延迟执行的代码
              $('#sex1').show()
              $('.progress-9').hide()
              }, 900);
              })
              $('#bt53').click(function(){
                $('.progress-9').show()
                $('#five').hide();
                setTimeout(function() {
          // 这里是延迟执行的代码
                $('#sex2').show()
                $('.progress-9').hide()
                }, 900);
                })
                $('#bt611').click(function(){
                  $('.progress-9').show()
                  $('#sex1').hide();
                  setTimeout(function() {
            // 这里是延迟执行的代码
                  $('#seven').show()
                  $('.progress-9').hide()
                  }, 900);
                  })
                  $('#bt621').click(function(){
                    $('.progress-9').show()
                    $('#sex2').hide();
                    setTimeout(function() {
              // 这里是延迟执行的代码
                    $('#seven').show()
                    $('.progress-9').hide()
                    }, 900);
                    })
                    $('#bt71').click(function(){
                      $('.progress-9').show()
                      $('#seven').hide();
                      setTimeout(function() {
                // 这里是延迟执行的代码
                      $('#eight').show()
                      $('.progress-9').hide()
                      }, 900);
                      })
                      $('#bt81').click(function(){
                        $('.progress-9').show()
                        $('#eight').hide();
                        setTimeout(function() {
                  // 这里是延迟执行的代码
                        $('#nine').show()
                        $('.progress-9').hide()
                        }, 900);
                        })
</script>
    </body>
</html>